const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry: './src/index.js',
    // 出口
    output: {
      // 输出文件名
      filename: 'build.js',
      // 输出路径
      path: resolve(__dirname, 'build')
    },
    // loader 配置
    module: {
        rules: [
            {
              // 匹配哪些文件
              test: /\.css$/,
              // 使用什么loader
              use: [
                  // 创建style标签，将js中样式插入其中
                  'style-loader',
                  // 将css文件变成commonjs模块加载刀js文件，内容是样式字符串
                  'css-loader'
              ]
            },
			{
				test: /\.less$/,
				use:[
					'style-loader',
					'css-loader',
					'less-loader'
				]
			},
			{
			 test:/\.(png|jpg|gif)$/,
			 // 下载url-loader 和file-loader
			 loader:'url-loader',
			 options:{
			 // 图片小于8kb转化为base64处理
			 // 减少请求数量减轻服务器压力
			 // 增大体积降低文件访问速度
			  limit:8*1024,
			  name:'[hash:10].[ext]'
			  // outputPath:'img'
			 }
		   },
		   {
			 // 引入html中图片进行处理
			 test:/\.html$/,
			 loader: 'html-loader'
		   }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
			template: './index.html'
		})
    ],
    // 模式
    mode:'development'
}